import {Component, ViewEncapsulation, Input} from '@angular/core';
import {GlobalState} from '../../app/global.state';
import {Router}  from '@angular/router';
import {UserService} from '../../../src/app/services/app.user';
import {Constants} from '../../app/common/app.constants';
declare let toastr:any;
declare let $:any;

@Component({
    selector: 'pages',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './pages.html'
})
export class Pages {
    @Input()
    constants:Constants;
    public isMenuCollapsed:boolean = false;
    current_year = new Date().getFullYear();

    constructor(public router:Router, public userService:UserService, private _state:GlobalState) {
        this.constants = new Constants();
    }

    // function call after load view
  ngAfterViewChecked() {
        let self = this;
        // Function for detect on menu click event
        $('.menuLink').unbind().mousedown(function (event) {
            let buttons;
            if (event.button === 0) {
                buttons = 'left click';
                let text = $(event.target).text();
                if (text !== 'Admininstrator') {
                    if ($(window).width() < 414) {
                        self.toggleMenu();
                    }
                }
            } else if (event.button === 1) {
                buttons = 'roller click';
            } else {
                buttons = 'right click';
            }


            let domTarget = event.target;
            let domTargetString = domTarget.toString();
            let stringDemo = domTargetString.substr(12, 25);
            let index = stringDemo.indexOf('E');
            let dom = stringDemo.substr(0, index);
            let text = $(event.target).text();

            let input = {
                'target': dom + ' ' + text,
                'value': text,
                'action': buttons
            };
            self.setMenuLogs(input);

        });

        // Function for detect on header click event
        $('.page-top').unbind().mousedown(function (event) {
            let buttons;
            if (event.button === 0) {
                buttons = 'left click';
            } else if (event.button === 1) {
                buttons = 'roller click';
            } else {
                buttons = 'right click';
            }

            let domTarget = event.target;
            let domTargetString = domTarget.toString();
            let stringDemo = domTargetString.substr(12, 25);
            let index = stringDemo.indexOf('E');
            let dom = stringDemo.substr(0, index);
            let text = $(event.target).text();

            let input = {
                'target': dom + ' ' + text,
                'value': text,
                'action': buttons,
                'class': event.toElement.classList.value
            };
            self.setHeaderLogs(input);
        });
    }

    // Function for mobile screen toggle menu
    public toggleMenu() {
        this.isMenuCollapsed = !this.isMenuCollapsed;
        this._state.notifyDataChanged('menu.isCollapsed', this.isMenuCollapsed);
        this.isMenuCollapsed = false;
    }

    // Function for set user log API call
    public setUserLogs(input) {

        this.userService.setUserLogs(input).subscribe();

        if (input.value.indexOf('Add New User') >= 0) {
            let data = {
                'target': this.constants.ADDUSER,
                'value': 'admin/adduser',
                'action': 'redirect'
            };

            this.userService.setUserLogs(data).subscribe();
        } else if (input.value.indexOf('Edit User') >= 0) {
            let data = {
                'target': this.constants.ADDUSER,
                'value': 'admin/user',
                'action': 'redirect'
            };

            this.userService.setUserLogs(data).subscribe();
        } else if (input.value.indexOf('Submit') >= 0) {
            let data = {
                'target': this.constants.URL + 'listidea',
                'value': 'listidea',
                'action': 'redirect'
            };

            this.userService.setUserLogs(data).subscribe();
        }
    }

    // Function for set header click logs
    public setHeaderLogs(input) {

        this.userService.setUserLogs(input).subscribe();
        setTimeout(() => {
            if (input.value === 'CrowdSourcing') {
                this.afterRedirect();
            } else if (input.class === 'username') {
                this.afterRedirect();
            } else if (input.value === 'Profile') {
                this.afterRedirect();
            }
        }, 200);

        if (input.value === 'Sign out') {
            let data = {
                'target': this.constants.URL + 'logout',
                'value': 'logout',
                'action': 'redirect'
            };

            this.userService.setUserLogs(data).subscribe();
        }
    }

    // Function for set user redirected page link log
    public afterRedirect() {
        let urlLink = this.router.url.substr(1, this.router.url.length);

        let input = {
            'target': this.constants.URL + urlLink,
            'value': urlLink,
            'action': 'redirect'
        };
        this.userService.setUserLogs(input).subscribe();
    }

    // Function for send menu log
    public setMenuLogs(input) {
        this.userService.setUserLogs(input).subscribe(
            data => this.redirectLink(input));
    }

    // Function for send redirect data to user log
    public redirectLink(data) {
        if (data.action === 'left click') {
            setTimeout(() => {
                this.afterRedirect();
            }, 200);
        }
    }
}
